<template>
  <div>
    <div class="title">{{ state.age }}</div>
    <div class="title">{{ state.computedAge }}</div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Observer } from "mobx-vue";
import AppModel from "./model/AppModel";

@Observer
@Component
export default class Count1 extends Vue {
  @Prop({ default: 100 }) start!: number;
  state = new AppModel(this.start);
  mounted() {
    setInterval(() => {
      this.state.setAge();
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
.logo {
  text-align: center;
  img {
    height: 200px;
  }
}
.title {
  text-align: center;
}
</style>
